<template>
    <div>
        <div id="concatme">给ta留言</div>
        <div id="contactContent">
            <a>Contact me</a>
            <form>
                <input name="geter" type="text" placeholder="收件人" v-model="geter">
                <input name="theme" type="text" placeholder="邮件主题" v-model="theme">
                <input name="email" type="text" placeholder="邮箱" v-model="email">
                <input name="content" type="textarea" placeholder="邮件内容" v-model="content">
                <input type="button" value="提交" @click="sendEmail">
            </form>
        <p style="color:white;font-size:20px;text-align:center" v-show="seen">发送成功!</p>

        </div>
        
    </div>
</template>
<script>
export default {
    data(){
        return{
            seen:false,
            theme:'',
            email:'',
            content:'',
            geter:'',
            mydate:''
        }
    },
    methods:{
        sendEmail(){
            // const mydata={theme:this.theme,
            //         email:this.email,
            //         content:this.content,}
            var date=new Date();
            this.mydate=date.getFullYear()+"/"+date.getMonth()+"/"+date.getDate()+"-"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
            
            this.$axios.post("/api/myBlog/send",
                    { 
                        geter:this.geter,
                        theme:this.theme,
                        email:this.email,
                        content:this.content,
                        date:this.mydate
                    },

                // headers:{
                //     // token:'110',
                //     'Content-Type':'application/x-www.form-urlencoded'
                // }
            ).then(res=>{
                if(res!=''){
                    this.seen=true
                }
                console.log(res.data)
            })
        }
    }
}
</script>
<style scoped>
    #concatme{
        width: 100%;
        height:600px;
        background-color: aquamarine;
        background-image: url("../assets/image/sunset.jpg");
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: white;
    }
    #contactContent{
        width: 100%;
        height:600px;
        background-color: #353434;;
        /* background-image: url('../assets/image/t01c4e3b9a06cd5d60c.jpg'); */
        background-size: cover;
        background-position: center;
        text-align: center;  
        padding-top: 30px;
    }
    #contactContent a{
        color:white;
        font-size: 30px;
        border-bottom: 3px groove #6fd0c4;
        padding: 0 10px 10px 10px;
    }

     #contactContent form{
         width: 350px;
         margin: 0 auto;
     }
     #contactContent input[type=text]{
         display: block;
         width: 300px;
         height: 35px;
         background-color: transparent;
         border:1px solid aquamarine;
         margin: 30px auto;
         color: #fff;
         border-radius: 5px;
     }
      #contactContent input[type=textarea]{
          height: 100px;
          width: 100%;
          display: block;
          background-color: transparent;
          border:1px solid aquamarine;
          margin: 30px auto;
          color: #fff;
          border-radius: 5px;
      }
     #contactContent input[type=button]{
         display: block;
         width: 80px;
         height: 35px;
         border:none;
         border-radius: 5px;
         margin: 30px auto;
         background-color: aquamarine;
     }
</style>